<template>
  <div>
    <el-form
      ref="auditForm"
      :model="auditForm"
      :rules="rules"
      label-width="98px"
      class="form-mb20"
    >
      <el-divider content-position="left">
        <div class="m-title">填报信息：</div>
      </el-divider>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="展区名称：">
            {{ detailForm.deptName }}
          </el-form-item>
        </el-col>
      </el-row>

      <div class="dashed"></div>

      <el-divider content-position="left">
        <div class="m-title">项目信息：</div>
      </el-divider>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="牵头单位：">
            {{ detailForm.headName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目名称：">
            {{ detailForm.projectName }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="项目简介：">
            {{ detailForm.info || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总投资额：">
            {{ detailForm.allMoney || "-" }}元
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="融资额：">
            {{ detailForm.prepared || "-" }}元
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目年限：">
            {{ detailForm.projectYear || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="合作方式：">
            {{ detailForm.meth || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="资金用途">
            {{ detailForm.way || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="收益预测">
            {{ detailForm.predict || "-" }}元
          </el-form-item>
        </el-col>
      </el-row>

      <div class="mb20 ml20 mr20">
        <ul>
          <li>注意：</li>
          <li>
            1.本表所有填报项均为必填项（包括序号），填报内容无或无法确定的填写“无”或“待定”，不得有空项，未填写无法上传。
          </li>
          <li>2.填报信息必须真实有效，否则无法通过审核。</li>
        </ul>
      </div>

      <div class="dashed"></div>
      <el-divider content-position="left">
        <div class="m-title">签约信息：</div>
      </el-divider>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="签约甲方：">
            {{ detailForm.sigOwner || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="签约人：">
            {{ detailForm.sigUser || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职务：">
            {{ detailForm.sigPost || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系方式：">
            {{ detailForm.sigMobile || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="地址：">
            {{ detailForm.address || "-" }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="w100 dashed mb20" />
        </el-col>
        <el-col :span="24">
          <el-form-item label="签约乙方：">
            {{ detailForm.buyer }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="签约人：">
            {{ detailForm.buyerUser }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职务：">
            {{ detailForm.buyerPost }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系方式：">
            {{ detailForm.buyerMibole }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="地址：">
            {{ detailForm.buyerAddress }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="w100 dashed mb20" />
        </el-col>
        <el-col :span="12">
          <el-form-item label="参展年限：">
            {{ detailForm.joinYear }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="签约图片：">
            <ul
              v-if="detailForm.picList && detailForm.picList.length != 0"
              class="more-100-list"
            >
              <li v-for="(item, index) in detailForm.picList" :key="index">
                <div v-if="item" class="demo-image__preview">
                  <el-image
                    :src="item"
                    :preview-src-list="[item]"
                    class="avatar"
                  />
                </div>
              </li>
            </ul>
            <span v-else>暂无图片</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="签约视频：">
            <div
              v-if="detailForm.videoUrl"
              style="width: 240px; height: 140px; position: relative"
            >
              <video
                :src="detailForm.videoUrl"
                controls
                style="width: 240px; height: 140px"
              />
            </div>
            <span v-else>暂无视频</span>
          </el-form-item>
        </el-col>
      </el-row>

      <template
        v-if="detailForm.status === 0 && checkPermi(['system:apply:audit'])"
      >
        <el-form-item label="审核结果：" prop="auditStatus" key="auditStatus">
          <el-radio-group
            v-model="auditForm.auditStatus"
            @change="changeStatus"
          >
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="审核意见："
          :prop="auditForm.auditStatus != 1 ? 'auditRemark' : undefined"
          ref="remarkVoid"
          key="auditRemark"
        >
          <el-input
            v-model="auditForm.auditRemark"
            type="textarea"
            placeholder="请输入内容"
            :rows="4"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item label="审核结果：">
          <span v-if="detailForm.status === 0" class="gray">待审核</span>
          <span v-if="detailForm.status === 1" class="green">市级通过</span>
          <span v-if="detailForm.status === 2" class="red">市级驳回</span>
          <span v-if="detailForm.status === 3" class="green">省级通过</span>
          <span v-if="detailForm.status === 4" class="red">省级驳回</span>
        </el-form-item>
        <el-form-item label="审核意见：">
          <span v-if="detailForm.status === 0"> -</span>
          <span v-if="detailForm.status === 1 || detailForm.status === 2">
            {{ detailForm.cityAuditInfo || "-" }}
          </span>
          <span v-if="detailForm.status === 3 || detailForm.status === 4">
            {{ detailForm.auditInfo || "-" }}
          </span>
        </el-form-item>
        <el-form-item label="审核人：">
          <span v-if="detailForm.status === 0"> -</span>
          <span v-if="detailForm.status === 1 || detailForm.status === 2">
            {{ detailForm.cityAudit || "-" }}
          </span>
          <span v-if="detailForm.status === 3 || detailForm.status === 4">
            {{ detailForm.auditBy || "-" }}
          </span>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
import { checkPermi } from "@/utils/permission";
export default {
  props: {
    detailForm: Object,
  },
  dicts: ["sys_user_sex"],
  data() {
    return {
      auditForm: {},
      rules: {
        auditStatus: [
          { required: true, message: "请选择审核结果", trigger: "change" },
        ],
        auditRemark: [
          { required: true, message: "请输入审核意见", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    checkPermi,
    rest() {
      this.auditForm = {
        auditStatus: undefined,
        auditRemark: undefined,
      };
      this.resetForm("auditForm");
    },
    // 校验
    setVali() {
      this.$refs["auditForm"].validate((valid) => {
        if (valid) {
          var param = {
            signatoryId: this.detailForm.signatoryId,
            auditStatus: this.auditForm.auditStatus,
            auditRemark: this.auditForm.auditRemark,
          };
          this.$emit("auditClick", param);
        }
      });
    },
    changeStatus() {
      this.$refs.remarkVoid.clearValidate();
    },
  },
};
</script>
